<template>
  <vxe-modal
    v-model="dialogFormVisible"
    :title="title"
    width="30%"
    show-footer
    destroy-on-close
    @close="close"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :data="form"
        :rules="rules"
        title-align="right"
        title-width="120"
        prevent-submit
      >
        <vxe-form-item title="字典名称" span="24" field="name">
          <template #default>
            <el-input v-model="form.name" type="text" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="字典类型" span="24" field="type">
          <template #default>
            <el-input v-model="form.type" type="text" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="状态" span="24" field="status">
          <template #default>
            <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item title="备注" span="24" field="remark">
          <template #default>
            <el-input
              v-model="form.remark"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="备注"
            />
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <template #footer>
      <el-button
        v-loading.fullscreen.lock="listLoading"
        type="primary"
        :loading="listLoading"
        @click="save"
      >
        <i class="icon-wpkj-save"></i>
        确定
      </el-button>
      <el-button type="danger" plain @click="close">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script>
  import { getDictType, typeSaveOrUpdate } from '@/api/system/dict/dict.type'

  export default defineComponent({
    name: 'DictTypeEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        form: {
          id: '',
          name: '',
          type: '',
          status: '',
          remark: '',
        },
        rules: {
          name: [
            { required: true, trigger: 'blur', message: '请输入字典名称' },
          ],
          type: [{ required: true, trigger: 'blur', message: '请输入字典值' }],
        },
        title: '',
        listLoading: false,
        dialogFormVisible: false,
      })

      const showEdit = async (row) => {
        if (row.id) {
          state.title = '编辑'
          const { code, data, msg } = await getDictType(row.id).catch((err) => {
            state.listLoading = false
          })
          if (code === 0 || code === 200) {
            state.form = data
          }
        } else {
          state.title = '添加'
        }

        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].reset()
        state.form = {
          id: '',
          name: '',
          type: '',
          status: '',
          remark: '',
        }
        state.dialogFormVisible = false
      }
      const save = async () => {
        const validate = await state['formRef']
          .validate()
          .catch((validate) => validate)

        if (!validate) {
          state.listLoading = true
          const { code, data, msg } = await typeSaveOrUpdate(state.form).catch(
            (err) => {
              state.listLoading = false
            }
          )
          if (code === 0 || code === 200) {
            state.listLoading = false
            $baseMessage(msg, 'success')
            emit('fetch-data', data)
            close()
          } else {
            state.listLoading = false
            $baseMessage(msg, 'error')
          }
        }
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>
